<template>
  <el-select :loading="loading" :value="value" @input="$emit('input', $event)" v-on="$listeners" v-bind="newAttrs">
    <el-option
      v-for="item in curOptions"
      :key="item[valueKey]"
      :label="item[labelKey]"
      :value="item[valueKey]"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'v-select',
  props: {
    value: null,
    labelKey: {
      default: 'label',
    },
    valueKey: {
      default: 'value',
    },
    options: {
      type: null,
    },
  },

  data() {
    return {
      curOptions: [],
      loading: false,
    };
  },

  computed: {
    newAttrs() {
      const {
        $attrs,
        $attrs: { remoteMethod },
      } = this;
      let newRemoteMethod = null;

      if (remoteMethod) {
        newRemoteMethod = query => {
          this.loading = true;
          const promise = new Promise(resolve => {
            remoteMethod(query, resolve);
          });
          promise
            .then(data => {
              this.curOptions = data;
            })
            .finally(() => {
              this.loading = false;
            });
        };
      }

      return {
        ...$attrs,
        filterable: true,
        remote: !!remoteMethod,
        remoteMethod: newRemoteMethod,
      };
    },
  },

  methods: {
    getOptions() {
      const { options } = this;

      if (typeof options === 'function') {
        const promise = new Promise(resolve => {
          options(resolve);
        });
        promise.then(data => {
          this.curOptions = data;
        });
      } else {
        this.curOptions = options;
      }
    },

    setOptions(options) {
      this.curOptions = options;
    },
  },

  created() {
    this.getOptions();
  },
};
</script>

<style lang="scss" scoped></style>
